<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>业务架构图</title>
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="../css/all.min.css">
    <style>
        /* 全局样式 */
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            display: flex;
        }

        /* 主容器样式 */
        .ai-bidding-main-container {
            border: 1px solid #ccc;
            width: 100%;
            margin: 20px auto;
            background-color: #e6f7ff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        /* 标题样式 */
        .ai-bidding-header {
            background-color: #007BFF;
            color: white;
            text-align: center;
            padding: 20px;
            font-size: 24px;
            font-weight: bold;
        }

        /* 每一层的样式 */
        .ai-bidding-layer {
            display: flex;
            padding: 15px;
            border-bottom: 1px solid #ccc;
        }

        .ai-bidding-layer:last-child {
            border-bottom: none;
        }

        /* 层标签样式 */
        .ai-bidding-layer-label {
            width: 120px;
            background-color: #007BFF;
            color: white;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
            margin-right: 10px;
            font-weight: bold;
            position: relative;
        }

        /* 层内元素样式 */
        .ai-bidding-layer div:not(.ai-bidding-layer-label) {
            border: 1px solid #ccc;
            margin: 5px;
            padding: 10px;
            border-radius: 5px;
            background-color: white;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            min-width: 100px;
            position: relative;
        }

        .ai-bidding-layer div:not(.ai-bidding-layer-label):hover {
            background-color: #f0f0f0;
        }

        /* 业务层多行布局样式 */
        .ai-bidding-layer .ai-bidding-multi-row {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
        }

        .ai-bidding-layer .ai-bidding-multi-row>.ai-bidding-business-tag {
            flex-basis: calc(20% - 10px);
            box-sizing: border-box;
        }

        /* 数据层多行布局样式 */
        .ai-bidding-layer .ai-bidding-data-row {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
        }

        .ai-bidding-layer .ai-bidding-data-row>div {
            flex-basis: calc(25% - 10px);
            box-sizing: border-box;
        }

        /* 应用层多行布局样式 */
        .ai-bidding-layer .ai-bidding-app-row {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
        }

        .ai-bidding-layer .ai-bidding-app-row>div {
            flex-basis: calc(16.66% - 10px);
            box-sizing: border-box;
        }

        /* 底部标识样式 */
        .ai-bidding-footer-label {
            text-align: right;
            padding: 15px;
            font-style: italic;
            color: #666;
        }

        /* 业务层标签样式 */
        .ai-bidding-business-tag {
            display: inline-block;
            background-color: #007BFF;
            color: white;
            padding: 5px 10px;
            border-radius: 3px;
            margin: 3px;
            position: relative;
        }

        /* 业务层删除按钮样式 */
        .ai-bidding-business-tag .ai-bidding-delete-btn {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #ff0000;
            color: white;
            border: none;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            cursor: pointer;
            display: none;
            font-size: 10px;
            line-height: 15px;
            text-align: center;
            padding: 0;
        }

        .ai-bidding-business-tag:hover .ai-bidding-delete-btn {
            display: block;
        }

        /* 添加按钮样式 */
        .ai-bidding-add-btn {
            position: absolute;
            top: 50%;
            right: 0px;
            transform: translateY(-50%);
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            cursor: pointer;
            display: none;
        }

        .ai-bidding-layer-label:hover .ai-bidding-add-btn {
            display: block;
        }

        /* 下载按钮样式 */
        .ai-bidding-download-btn {
              position: fixed;
              right: 10px;
              top: 50%;
              transform: translateY(-50%);
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              color: white;
              border: none;
              width: 50px;
              height: 50px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
              transition: all 0.3s;
              z-index: 100;
        }

        /* 用户层和处理层添加新元素后换行 */
        .ai-bidding-layer:nth-child(2) > div:not(.ai-bidding-layer-label),
        .ai-bidding-layer:nth-child(5) > div:not(.ai-bidding-layer-label) {
            flex-basis: calc(20% - 10px);
            box-sizing: border-box;
        }

        /* 删除按钮样式 */
        .ai-bidding-delete-btn {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #ff0000;
            color: white;
            border: none;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            cursor: pointer;
            display: none;
            font-size: 10px;
            line-height: 15px;
            text-align: center;
        }

        .ai-bidding-layer div:not(.ai-bidding-layer-label):hover .ai-bidding-delete-btn {
            display: block;
        }
    </style>
</head>

<body>
    <div class="ai-bidding-main-container">
        <div class="ai-bidding-header" contenteditable="true">业务架构图</div>
        <div class="ai-bidding-layer">
            <div class="ai-bidding-layer-label" contenteditable="true">
                用户层
                <button class="ai-bidding-add-btn" onclick="addElement(this.parentNode.parentNode, '用户层')"><i class="fa-solid fa-plus"></i></button>
            </div>
            <div class="ai-bidding-app-row">
                <div style="flex: 1;" contenteditable="true">
                    <i class="fa-solid fa-users"></i> 领导组
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div style="flex: 1;" contenteditable="true">
                    <i class="fa-solid fa-user-tie"></i> 项目经理
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div style="flex: 1;" contenteditable="true">
                    <i class="fa-solid fa-user"></i> 客户经理
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div style="flex: 1;" contenteditable="true">
                    <i class="fa-solid fa-users-gear"></i> 企业员工
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div style="flex: 1;" contenteditable="true">
                    <i class="fa-solid fa-user-graduate"></i> 专家顾问团队
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div style="flex: 1;" contenteditable="true">
                    <i class="fa-solid fa-truck"></i> 供应链合作伙伴
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
            </div>
        </div>
        <div class="ai-bidding-layer">
            <div class="ai-bidding-layer-label" contenteditable="true">
                应用层
                <button class="ai-bidding-add-btn" onclick="addElement(this.parentNode.parentNode, '应用层')"><i class="fa-solid fa-plus"></i></button>
            </div>
            <div class="ai-bidding-app-row">
                <div contenteditable="true">
                    <i class="fa-solid fa-money-bill-trend-up"></i> 报价策略分析报告
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-gamepad"></i> 投标策略分析报告
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-file"></i> 投标文件
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-bell"></i> 招标信息实时追踪
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-user-secret"></i> 竞争对手识别
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-scale-balanced"></i> 合规性检查
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-exclamation-triangle"></i> 风险预警提示
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-timeline"></i> 项目进度管理
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-chart-line"></i> 数据可视化展示
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-lightbulb"></i> 投标方案智能推荐
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-money-bill-wave"></i> 报价策略优化
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-book"></i> 投标知识库
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
            </div>
        </div>
        <div class="ai-bidding-layer">
            <div class="ai-bidding-layer-label" contenteditable="true">
                业务层
                <button class="ai-bidding-add-btn" onclick="addElement(this.parentNode.parentNode, '业务层')"><i class="fa-solid fa-plus"></i></button>
            </div>
            <div class="ai-bidding-multi-row">
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-magnifying-glass-chart"></i> AI投标分析
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-question"></i> AI质疑分析
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-file-word"></i> AI标书生成
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-project-diagram"></i> 投标项目管理
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-building"></i> 企业管理
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-cogs"></i> 策略模型管理
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-file-invoice"></i> 招标文件解析
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-check"></i> 投标文件智能检查
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-user-shield"></i> 竞对分析
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-dollar-sign"></i> 报价策略
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-handshake"></i> 投标伙伴策略
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-exclamation"></i> 风险分析
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-search"></i> 智能需求分析
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-file-import"></i> 智能文件处理与解读
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-gavel"></i> 智能评标辅助
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-scale-unbalanced"></i> 智能合规性检查
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-plug"></i> API管理与系统集成
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-lock"></i> 安全与权限管理
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-chart-pie"></i> 数据分析与报告生成
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
                <span class="ai-bidding-business-tag" contenteditable="true">
                    <i class="fa-solid fa-pencil"></i> 智能编标辅助
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </span>
            </div>
        </div>
        <div class="ai-bidding-layer">
            <div class="ai-bidding-layer-label" contenteditable="true">
                处理层
                <button class="ai-bidding-add-btn" onclick="addElement(this.parentNode.parentNode, '处理层')"><i class="fa-solid fa-plus"></i></button>
            </div>
            <div class="ai-bidding-app-row">
                <div style="flex: 1;" contenteditable="true">
                    <i class="fa-solid fa-download"></i> 信息收集
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div style="flex: 1;" contenteditable="true">
                    <i class="fa-solid fa-broom"></i> 数据清洗
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div style="flex: 1;" contenteditable="true">
                    <i class="fa-solid fa-layer-group"></i> 整合和分析
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div style="flex: 1;" contenteditable="true">
                    <i class="fa-solid fa-cube"></i> AI建模
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div style="flex: 1;" contenteditable="true">
                    <i class="fa-solid fa-brain"></i> 模型训练
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div style="flex: 1;" contenteditable="true">
                    <i class="fa-solid fa-wrench"></i> 模型优化
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
            </div>
        </div>
        <div class="ai-bidding-layer">
            <div class="ai-bidding-layer-label" contenteditable="true">
                数据层
                <button class="ai-bidding-add-btn" onclick="addElement(this.parentNode.parentNode, '数据层')"><i class="fa-solid fa-plus"></i></button>
            </div>
            <div class="ai-bidding-data-row">
                <div contenteditable="true">
                    <i class="fa-solid fa-globe"></i> 政府采购网站
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-database"></i> 公共资源交易平台
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-newspaper"></i> 行业协会和专业网站
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-folder-open"></i> 历史投标记录
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-clipboard-list"></i> 项目管理数据
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-code"></i> 数据服务接口
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-book-open"></i> 行业研究机构
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
                <div contenteditable="true">
                    <i class="fa-solid fa-truck-field"></i> 合作伙伴和供应链数据
                    <button class="ai-bidding-delete-btn" onclick="deleteElement(this.parentNode)">&times;</button>
                </div>
            </div>
        </div>
        <div class="ai-bidding-footer-label" contenteditable="true">业务架构图</div>
    </div>
    <button class="ai-bidding-download-btn" onclick="downloadAsImage()">
        <i class="fa-solid fa-download"></i>
    </button>
    <script src="../js/html2canvas.min.js"></script>
    <script>
        const iconList = [
            'fa-solid fa-users', 'fa-solid fa-user-tie', 'fa-solid fa-user', 'fa-solid fa-users-gear',
            'fa-solid fa-user-graduate', 'fa-solid fa-truck', 'fa-solid fa-money-bill-trend-up',
            'fa-solid fa-gamepad', 'fa-solid fa-file', 'fa-solid fa-bell', 'fa-solid fa-user-secret',
            'fa-solid fa-scale-balanced', 'fa-solid fa-exclamation-triangle', 'fa-solid fa-timeline',
            'fa-solid fa-chart-line', 'fa-solid fa-lightbulb', 'fa-solid fa-money-bill-wave',
            'fa-solid fa-book', 'fa-solid fa-magnifying-glass-chart', 'fa-solid fa-question',
            'fa-solid fa-file-word', 'fa-solid fa-project-diagram', 'fa-solid fa-building',
            'fa-solid fa-cogs', 'fa-solid fa-file-invoice', 'fa-solid fa-check',
            'fa-solid fa-user-shield', 'fa-solid fa-dollar-sign', 'fa-solid fa-handshake',
            'fa-solid fa-exclamation', 'fa-solid fa-search', 'fa-solid fa-file-import',
            'fa-solid fa-gavel', 'fa-solid fa-scale-unbalanced', 'fa-solid fa-plug',
            'fa-solid fa-lock', 'fa-solid fa-chart-pie', 'fa-solid fa-pencil',
            'fa-solid fa-download', 'fa-solid fa-broom', 'fa-solid fa-layer-group',
            'fa-solid fa-cube', 'fa-solid fa-brain', 'fa-solid fa-wrench',
            'fa-solid fa-globe', 'fa-solid fa-database', 'fa-solid fa-newspaper',
            'fa-solid fa-folder-open', 'fa-solid fa-clipboard-list', 'fa-solid fa-code',
            'fa-solid fa-book-open', 'fa-solid fa-truck-field'
        ];

        function getRandomIcon() {
            const randomIndex = Math.floor(Math.random() * iconList.length);
            return iconList[randomIndex];
        }

        function addElement(layer, layerName) {
            const newDiv = document.createElement('div');
            newDiv.setAttribute('contenteditable', 'true');
            const randomIcon = getRandomIcon();
            newDiv.innerHTML = `<i class="${randomIcon}"></i> 新元素`;
            let targetContainer;
            if (layerName === '用户层' || layerName === '处理层' || layerName === '应用层') {
                targetContainer = layer.querySelector('.ai-bidding-app-row');
            } else if (layerName === '业务层') {
                const newSpan = document.createElement('span');
                newSpan.classList.add('ai-bidding-business-tag');
                newSpan.setAttribute('contenteditable', 'true');
                newSpan.innerHTML = `<i class="${randomIcon}"></i> 新业务`;
                const deleteButton = document.createElement('button');
                deleteButton.classList.add('ai-bidding-delete-btn');
                deleteButton.textContent = '×';
                deleteButton.onclick = function () {
                    deleteElement(newSpan);
                };
                newSpan.appendChild(deleteButton);
                targetContainer = layer.querySelector('.ai-bidding-multi-row');
                targetContainer.appendChild(newSpan);
                return;
            } else if (layerName === '数据层') {
                targetContainer = layer.querySelector('.ai-bidding-data-row');
            }
            const deleteButton = document.createElement('button');
            deleteButton.classList.add('ai-bidding-delete-btn');
            deleteButton.textContent = '×';
            deleteButton.onclick = function () {
                deleteElement(newDiv);
            };
            newDiv.appendChild(deleteButton);
            targetContainer.appendChild(newDiv);
        }

        function deleteElement(element) {
            element.parentNode.removeChild(element);
        }

        function downloadAsImage() {
            const container = document.querySelector('.ai-bidding-main-container');
            // 隐藏所有不需要的元素
            const addButtons = document.querySelectorAll('.ai-bidding-add-btn');
            const deleteButtons = document.querySelectorAll('.ai-bidding-delete-btn');
            
            addButtons.forEach(btn => btn.style.display = 'none');
            deleteButtons.forEach(btn => btn.style.display = 'none');

            html2canvas(container, {
                backgroundColor: '#f4f4f4',
                scale: 2, // 提高分辨率
                logging: false,
                allowTaint: true,
                useCORS: true
            }).then(canvas => {
                // 创建更高分辨率的canvas
                const scaledCanvas = document.createElement('canvas');
                const scale = 2;
                scaledCanvas.width = canvas.width * scale;
                scaledCanvas.height = canvas.height * scale;
                const ctx = scaledCanvas.getContext('2d');
                
                // 填充背景
                ctx.fillStyle = '#f4f4f4';
                ctx.fillRect(0, 0, scaledCanvas.width, scaledCanvas.height);
                
                // 绘制缩放后的内容
                ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 
                              0, 0, scaledCanvas.width, scaledCanvas.height);
                
                // 下载
                const link = document.createElement('a');
                link.href = scaledCanvas.toDataURL('image/png');
                link.download = `${getCurrentDateTimeString()}.png`;
                link.click();
                
                // 恢复按钮显示
                addButtons.forEach(btn => {
                    btn.style.display = 'none';
                    btn.parentNode.addEventListener('mouseover', () => {
                        btn.style.display = 'block';
                    });
                    btn.parentNode.addEventListener('mouseout', () => {
                        btn.style.display = 'none';
                    });
                });
                deleteButtons.forEach(btn => {
                    btn.style.display = 'none';
                    btn.parentNode.addEventListener('mouseover', () => {
                        btn.style.display = 'block';
                    });
                    btn.parentNode.addEventListener('mouseout', () => {
                        btn.style.display = 'none';
                    });
                });
            });
        }

        function getCurrentDateTimeString() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            return `${year}${month}${day}_${hours}${minutes}${seconds}`;
        }
    </script>
</body>

</html>